<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 下面是 uploadify文件上传插件的引入-->
    <script type="text/javascript" src="Public/Admin/uploadify/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="Public/Admin/uploadify/jquery.uploadify.min.js"></script>
    <link rel="stylesheet" type="text/css" href="Public/Admin/uploadify/uploadify.css">
    	
    	
		<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
	    <!-- Loading Bootstrap -->
	    <link href="./Public/Admin/Flat/dist/css/vendor/bootstrap.min.css" rel="stylesheet">
	    <!-- Loading Flat UI -->
	    <link href="./Public/Admin/Flat/dist/css/flat-ui.css" rel="stylesheet">
	    <link href="./Public/Admin/Flat/docs/assets/css/demo.css" rel="stylesheet">
	    <link rel="shortcut icon" href="./Public/Admin/Flat/img/favicon.ico">
	    	
	   <!--载入百度编辑器插件的引入-->
	    	<script type="text/javascript" charset="utf-8" src="Public/Admin/ueditor1_4_3/ueditor.config.js"></script>
    		<script type="text/javascript" charset="utf-8" src="Public/Admin/ueditor1_4_3/ueditor.all.min.js"> </script>
    		<script type="text/javascript" charset="utf-8" src="Public/Admin/ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>
    		
    		
    		<!--ajax的引入-->
    		<script type="text/javascript">
    			$(function(){
    			
    				//这里有一个知识点是，表单的下拉选框的事件是change事件，下面是抓取select元素的方法之一
    				$('select[name=shop_category_cid]').change(function(){
    					//获得选中的option中的shop_type_tid属性,下面是jq抓取被选的option元素的方法
    					var shop_type_tid=$('option:selected').attr('shop_type_tid');
//  					console.log(shop_type_tid);这是在控制台打印的方法，不必再页面中弹框了，因为弹框不能弹数组，而控制台可以打印出来数组数据
						
						$.ajax({
							//提交的方式
							type:"post",
							//提交到的地址，是地址，就可以在地址处 接收到
							url:"<?php echo U('Goods/getAttr')?>",
							//提交的数据分配方式
							data:{t : shop_type_tid},
							//确定返回的数据类型
							dataType:'json',
							success:function(phpData){
								
								//下面的变量 为了得到新的html文件，压入到页面中做准备
								var attr='';
								var spec='';
								//下面是类似于原生js中for循环，jq中自带的循环的方法
								$.each(phpData,function(k,v){
									//如果是属性,1是不可选择的属性
									if(v.class==1){
										//这里是不可选择的属性
										attr +='<div class="form-group">';
										attr +='<label for="psselect">'+v.taname+'</label>';
										
										attr +='<select  name="attr['+v.taid+']" class="form-control" style="width: 70%;display: inline;margin-left: 30px;">';
										attr +='<option value="">请选择</option>';
											$.each(v.tavalue,function(kk,vv){
												attr +='<option value="'+vv+'">'+vv+'</option>';
											});
										attr +='</select>';
										attr +='</div>';
									}else{
										//下面是规格，就是可以被前台用户选择的
										
										spec +='<div class="form-group">';
										spec +='<label >'+v.taname+':</label>';
										//下面是重点，为了在接收 数据的时候没有问题，这里采用 4维数组形式定义name值，另外这里
//										spec[value]很奇怪，js数组没有这种形式，这里应该是系统默认成索引数组了，所以没有引号
										
										spec +='<select  name="spec[value]['+v.taid+'][]" class="form-control" style="width: 20%;display: inline;margin-left: 10px;margin-right: 20px;">';
										spec +='<option value="">请选择</option>';
											$.each(v.tavalue, function(kk,vv) {
												spec +='<option value="'+vv+'">'+vv+'</option>';
											});
										spec +='</select>';
										spec +='<label for="fourinput">附加价值:</label>';
										spec +='<input id="fourinput" class="form-control" type="text"   name="spec[added]['+v.taid+'][]" style="width: 20%;display: inline;margin-left: 10px;margin-right:20px ;">';
										spec +='<button class="btn btn-primary btn-block addSpec" type="button" style="width: 10%;display: inline;">添加规格</button>';
										spec +='</div>';
									}
								});
								//html()方法是 jq中 的函数 ，往标签中添加内容的
								$('#attr').html(attr);
								$('#spec').html(spec);	
							}
						});
    				});	
    			
	    			//点击添加规格
	    			//这里的live()方法，给未来元素添加事件
	    			$('.addSpec').live('click',function(){
	    				//找到当前的父级的div,这里找到的是一个对象，包含标签节点和文本节点两部分
	    				//此处找父级div有问题，我最外层套两层div的话，怎么能找到两个，这里我被迫用li了？？？，因为parents()函数的原因，可找到父辈，祖父辈往上
	    				var divObj=$(this).parent('div');
//	    				console.log(divObj);
	    				//克隆一个,jq中的clone()方法
	    				var div=divObj.clone();
//	    				console.log(div);
	    				
	    				//这里是为了改变标签 自身带的方法，通过改变class，然后通过class抓取元素，在施加相应的函数方法
	    				div.find('.addSpec').html('删除规格').removeClass('addSpec').addClass('removeSpec').css('background-color','#CEA045');
	    				//再次插入到当前父级的div空间下面,尼玛各种jq方法的应用
	    				divObj.after(div);
	    			});
	    			
	    			//删除方法
	    			$('.removeSpec').live('click',function(){
	    				//jq方法remove()移除
	    				$(this).parent('div').remove();
	    			});
    			
    			
    			})
    		</script>
	</head>
	<body>
		<!--上传文件就要用到一个属性，我们必须要加上：enctype="multipart/form-data"-->
		<form action="" method="post"  enctype="multipart/form-data">
			<div class="alert alert-success" style="text-align: center;">添加商品</div>
						
			<center><button class="btn btn-primary btn-block" type="button" style="width: 20%;background-color:#006CCC;"> 下面基本信息 </button></center>
			<div  style="width: 1px;height: 20px;"></div>
		<center><div class="form-group">
			<label for="oneselect" >所属分类</label>
			<select id="oneselect" name="shop_category_cid" class="form-control" style="width: 70%;display: inline;margin-left: 30px;">
				<option value="">请选择</option>
				<?php foreach ($catedata as $v){?>
				<!--对于下拉选项，这里value才是真正传到后台数据的属性，中间是显示的信息，value是传递的信息,在标签中可以
					随意添加无关的属性，不影响功能，有一个功能就是可以传递信息-->
				<option value="<?php echo $v['cid']?>" shop_type_tid=<?php echo $v['shop_type_tid']?>><?php echo $v['_name']?></option>
				<?php }?>
			</select>
			
		</div>
		<div class="form-group">
			<label for="twoselect">所属品牌</label>
			<select id="twoselect" name="shop_brand_bid" class="form-control" style="width: 70%;display: inline;margin-left: 30px;">
				<option value="">请选择</option>
				<?php foreach ($branddata as $v){?>
				<option value="<?php echo $v['bid']?>"><?php echo $v['bname']?></option>
				<?php }?>
			</select>
		</div>
		<div class="form-group">
			<label for="oneinput">商品名称</label>
			<input id="oneinput" class="form-control" type="text" placeholder=""  name="gname" style="width: 70%;display: inline;margin-left: 30px;">
		</div>
		<div class="form-group">
			<label for="binput">商品描述</label>
			<input id="binput" class="form-control" type="text" placeholder="商品的简单介绍"  name="desc" style="width: 70%;display: inline;margin-left: 30px;">
		</div>
		<div class="form-group">
			<label for="binput">商品货号</label>
			<input id="binput" class="form-control" type="text" placeholder=""  name="gnumber" style="width: 70%;display: inline;margin-left: 30px;">
		</div>
		<div class="form-group">
			<label for="twoinput">商品单位</label>
			<input id="twoinput" class="form-control" type="text" placeholder=""  name="unit" value="件" style="width: 70%;display: inline;margin-left: 30px;">
		</div>
		<div class="form-group">
			<label for="threeinput">商品市价</label>
			<input id="threeinput" class="form-control" type="text" placeholder=""  name="marketprice" style="width: 70%;display: inline;margin-left: 30px;">
		</div>
		<div class="form-group">
			<label for="fourinput">商品商价</label>
			<input id="fourinput" class="form-control" type="text" placeholder=""  name="shopprice" style="width: 70%;display: inline;margin-left: 30px;">
		</div>
		<div class="form-group">
			<label for="dinput">商品库存</label>
			<input id="dinput" class="form-control" type="text" placeholder=""  name="stock" style="width: 70%;display: inline;margin-left: 30px;">
		</div>
		<div class="form-group">
			<label for="dinput">点击次数</label>
			<input id="dinput" class="form-control" type="text" placeholder="商品被点击的次数"  name="click" style="width: 70%;display: inline;margin-left: 30px;">
		</div>
		</center>
		<center><button class="btn btn-primary btn-block" type="button" style="width: 20%;background-color:#006CCC;"> 下面商品属性 </button></center>				
		<div id="" style="width: 1px;height: 20px;"></div>
		<center>
		<div id="attr">
			
		</div>
			<!--<div class="form-group">
				<label for="psselect">所属分类</label>
				<select id="psselect" name="category_cid" class="form-control" style="width: 70%;display: inline;margin-left: 30px;">
					<option value="">请选择</option>
					<option value="12">12</option>
				</select>
			</div>-->
		
		</center>
		
		<center><button class="btn btn-primary btn-block" type="button" style="width: 20%;background-color:#006CCC;">下面商品规格</button></center>	
		<div  style="width: 1px;height: 20px;"></div>
		<center>
			<div id="spec">
				
			</div>
				<!--<div class="form-group">
					<label for="psselect">商品颜色:</label>
					<select id="psselect" name="category_cid" class="form-control" style="width: 20%;display: inline;margin-left: 10px;margin-right: 20px;">
						<option value="">请选择</option>
						<option value="12">12</option>
					</select>
					<label for="fourinput">附加价值:</label>
					<input id="fourinput" class="form-control" type="text" placeholder=""  name="title" style="width: 20%;display: inline;margin-left: 10px;margin-right:20px ;">
					<button class="btn btn-primary btn-block" type="button" style="width: 10%;display: inline;">添加规格</button>
				</div>-->
			
			
		    
		</center>
		
		
		<!--<div class="form-group">
			<label for="fourinput">商品颜色</label>
			<input id="fourinput" class="form-control" type="text" placeholder=""  name="title" style="width: 70%;display: inline;margin-left: 30px;">
			<label for="fiveinput">附加价值</label>
			<input id="fiveinput" class="form-control" type="text" placeholder=""  name="title" style="width: 70%;display: inline;margin-left: 30px;">
		</div>-->
		
		<center><button class="btn btn-primary btn-block" type="button" style="width: 20%;background-color:#006CCC;"> 列表图</button></center>	
		<center><div lab="uploadFile">
			<!-- file表单 -->
			<!--下面是uploadify的语句，其中想要在一个网页中添加多个程序，那么改动表单的id，这是表单的唯一区别-->
		    <input id="uppic" name="uppic" type="file" multiple="true">
		    <span>类型: *.jpg,*.png 大小: 2000KB 数量: 1</span>
		    <script type="text/javascript">
		        $(function() {
		            $('#uppic').uploadify({
		                'formData'     : {//POST数据
		                    '<?php echo session_name();?>' : '<?php echo session_id();?>',
		                },
		                'fileTypeExts' : '*.jpg;*.png',
		                //这里是指定的flash路径，调用的swf文件路径
		                'swf'      : '<?php echo __PUBLIC__?>/Admin/uploadify/uploadify.swf',
		                'uploader' : '<?php echo U('upload')?>',//指定服务器上传的方法
		                'buttonText':'选择图片文件',
		                'fileSizeLimit' : '2000KB',
		                'uploadLimit' : 1,//上传文件数
		                'width':80,
		                'height':25,
		                'successTimeout':10,//等待服务器响应时间
		                'removeTimeout' : 0.2,//成功显示时间
		                'onUploadSuccess' : function(file, data, response) {
		                    //把php返回的数据转为json
		                    data=$.parseJSON(data);
		                    //获得图片地址
		                    var imageUrl = data.url;
		                    var li="<li>";
		                    li += "<img src='"+imageUrl+"'/>";
		                    //下面这个input才是真正post提交数据时候用到的
		                    li += "<input type='hidden' name='pic' value='"+data.path+"'/><a href='javascript:;' id='self-close'>X</a>";
		                    li += "</li>";
		                    $("#uploadList ul").prepend(li);
		                }
		            });
		
					//关闭图片
		            var i = 1;
		            $('#self-close').live('click',function(){
		            	var path=$(this).prev('input').attr('value');
		            	$.ajax({
							//提交的方式
							type:"post",
							//提交到的地址，是地址，就可以在地址处 接收到
							url:"<?php echo U('Goods/delImg')?>",
							//提交的数据分配方式
							data:{v : path},
							//确定返回的数据类型
							dataType:'json',
							
							});
						
		                $(this).parent('li').remove();		  
		                i++;
		                $('#uppic').uploadify('settings','uploadLimit',i);
		                
		            })
		        });
		    </script>
		    <div id="uploadList">
		        <ul>
		
		        </ul>
		    </div>
		</div>
		</center>
		
		
		<center><button class="btn btn-primary btn-block" type="button" style="width: 20%;background-color:#006CCC;"> 商品图册</button></center>	
		<center><div lab="uploadFile">
			<!-- file表单 -->
		    <input id="v" type="file" multiple="true">
		    <span>类型: *.jpg,*.png 大小: 2000KB 数量: 6</span>
		    <script type="text/javascript">
		        $(function() {
		            $('#v').uploadify({
		                'formData'     : {//POST数据
		                    '<?php echo session_name();?>' : '<?php echo session_id();?>',
		                },
		                'fileTypeExts' : '*.jpg;*.png',
		                'swf'      : '<?php echo __PUBLIC__?>/Admin/uploadify/uploadify.swf',
		                'uploader' : '<?php echo U('upload')?>',//指定服务器上传的方法
		                'buttonText':'选择文件',
		                'fileSizeLimit' : '2000KB',
		                'uploadLimit' : 6,//上传文件数
		                'width':65,
		                'height':25,
		                'successTimeout':10,//等待服务器响应时间
		                'removeTimeout' : 0.2,//成功显示时间
		                'onUploadSuccess' : function(file, data, response) {
		                    //把php返回的数据转为json
		                    data=$.parseJSON(data);
		                    //获得图片地址
		                    var imageUrl = data.url;
		                    var li="<li>";
		                    li += "<img src='"+imageUrl+"'/>";
		                    li += "<input type='hidden' name='big[]' value='"+data.path+"'/><a href='javascript:;' id='self-closed'>X</a>";
		                    li += "</li>";
		                    $("#upload ul").prepend(li);
		                }
		            });
		
					//关闭图片
		            var i = 1;
		            $('#self-closed').live('click',function(){
		            	var path=$(this).prev('input').attr('value');
		            	$.ajax({
							//提交的方式
							type:"post",
							//提交到的地址，是地址，就可以在地址处 接收到
							url:"<?php echo U('Goods/delImg')?>",
							//提交的数据分配方式
							data:{v : path},
							//确定返回的数据类型
							dataType:'json',
							
							});
		                $(this).parent('li').remove();
		                i++;
		                $('#v').uploadify('settings','uploadLimit',i);
		            })
		        });
		    </script>
		    <div id="upload">
		        <ul>
		
		        </ul>
		    </div>
		</div>
		</center>
		
		
		<center><button class="btn btn-primary btn-block" type="button" style="width: 20%;background-color:#006CCC;" onclick="shoden()"> 商品详情</button></center>	
		<div class="form-group" id="goodsdetail" style="display: none;">
			<label for="">商品详情</label>
			<!--调用百度编辑器，通过js来调用，又是一种js和html混排的方式，请死记-->
			<script id="editor" type="text/plain" style="width:100%;height:300px;" name="intro" >
				
			</script>
		    <script>
		        var ue = UE.getEditor('editor');
		    </script>
			<!--<textarea name="content" rows="5" cols=""  class="form-control" placeholder="请输入文章正文"></textarea>-->
		</div>
		
		<!--下面的js是点击事件中显示隐藏方法-->
		<script type="text/javascript">
			function shoden(){
				var ps=document.getElementById('goodsdetail');
				if(ps.style.display=='none'){
					ps.style.display='block';
				}else{
					ps.style.display='none';
				}
				
			}
			
			function shodden(){
				var ps=document.getElementById('goodsservice');
				if(ps.style.display=='none'){
					ps.style.display='block';
				}else{
					ps.style.display='none';
				}
				
			}
		</script>
		
		<center><button class="btn btn-primary btn-block" type="button" style="width: 20%;background-color:#006CCC;margin-top: 20px;" onclick="shodden()"> 售后服务</button></center>			
		<div  style="width: 1px;height: 20px;"></div>
		<div class="form-group" id="goodsservice" style="display: none;" >
			<label for="">售后服务</label>
			<!--调用百度编辑器，通过js来调用，又是一种js和html混排的方式，请死记-->
			<!--提交后 ，表单接收，怎么接收呢，通过下面这个js中的name，就类似于表单name-->
			<script id="editortwo" type="text/plain" style="width:100%;height:300px;" name="service"></script>
		    <script>
		        var ue = UE.getEditor('editortwo');
		    </script>
			<!--<textarea name="content" rows="5" cols=""  class="form-control" placeholder="请输入文章正文"></textarea>-->
		</div>
		
		<button class="btn btn-primary btn-block" type="submit"> 确定 </button>
			
		</form>
		
	</body>
</html>
